<template>
  <div class="echarts" ref="echartsPie" :style="{ minHeight: '100px' }"></div>
</template>
<script>
import { onResizeChang } from "../js/common";
var colorList = [
  // '#C1232B',
  '#B5C334', '#FCCE10', '#E87C25', '#27727B',
  '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
  '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
];
export default {
  name: "pie",
  props: {
    // 类型
    type: {
      type: String,
    },
    // 一些配置项
    setting: {
      type: Object,
      default: {},
    },
    // 数据
    data: {
      type: [Object, Array],
      default: [],
    },
  },
  data() {
    return {};
  },
  created() {
    // 监听屏幕改变的话就调用
    onResizeChang("start", this.onResizeChange);
  },
  methods: {
    echartInit() {
      var myChart = this.$echarts.init(this.$refs.echartsPie);
      var option = {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: this.setting.radius || "80%",
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              formatter: (e) => {
                let n = 0;
                this.data.filter((val) => (n = n + val.value));
                let res = `${e.name}：${e.value}`
                if (this.setting.percentage && Object.keys(e.data).includes('percentage')) {
                  res = res + `\n 占比：${e.data.percentage}`
                }
                return res;
              },
            },
            tooltip: {
              formatter: (e) => {
                let n = 0;
                this.data.filter((val) => (n = n + val.value));
                let res = `${e.marker}${e.name}：${e.value}`
                if (this.setting.percentage && Object.keys(e.data).includes('percentage')) {
                  res = `<div style="display:flex;flex-direction:column;"><span>${res}</span> <span style="color:${e.color};">占比：${e.data.percentage}</span></div>`
                }
                return res;
              },
            },
            emphasis: {
              scale: true, // 开启放大效果
              scaleSize: 1.1, // 设置放大的比例，默认为1.1,
              label: {
                show: false,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            // labelLine: {
            //   show: true,
            // },
            color: colorList,
            data: this.data || [],
          },
        ],
      };
      myChart.setOption(option);
    },
    // 重新计算
    onResizeChange() {
      var myChart = this.$echarts.init(this.$refs.echartsPie);
      myChart.resize();
      this.echartInit();
    },
  },
  mounted() {
    this.echartInit();
  },
  computed: {
    // 文字
    centerTitle() {
      return this.setting.title || "";
    },
  },
  // 销毁
  beforeDestroy() {
    onResizeChang("end", this.onResizeChange);
  },
  watch: {
    data: {
      handler(nVal, oVal) {
        this.echartInit();
        this.onResizeChange();
      },
    },
  },
};
</script>
<style lang="less" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
